<template>
  <el-drawer
    v-model="drawerVisible"
    direction="rtl"
    @open="handleOpen"
    @close="handleClose"
    class="drawer-main"
  >
    <template #header>
      <h2 style="font-weight: bold">指派网格员</h2>
    </template>
    <template #default>
      <el-descriptions class="margin-top" title="职位信息" :column="1" :size="'large'" border>
        <el-descriptions-item width="100px">
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              姓名
            </div>
          </template>
          {{ currentMember.memName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              电话
            </div>
          </template>
          {{ currentMember.memNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <office-building />
              </el-icon>
              工作地址
            </div>
          </template>
          {{ currentMember.workProvince }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <BellFilled />
              </el-icon>
              选择网格员
            </div>
          </template>
          <el-select
            v-model="selected"
            clearable
            placeholder="请选择要指派的网格员"
            class="drawer-default"
            @change="handleChange"
          >
            <el-option
              v-for="item in memberList"
              :key="item.memId"
              :label="item.memName"
              :value="item.memId"
            >
              <div>
                <el-tag
                  style="font-weight: bold; font-size: 16px"
                  size="default"
                  :type="
                    item.memState === 1 ? 'success' : item.memState === 2 ? 'warning' : 'danger'
                  "
                  >{{ item.memName }}</el-tag
                >
                <span style="margin-left: 30px">{{
                  item.memState === 1 ? '空闲中' : item.memState === 2 ? '工作中' : '休假中'
                }}</span>
              </div>
            </el-option>
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <div class="footer-btn">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'
import { storeToRefs } from 'pinia'
import { useMemberStore } from '@/stores/member/member.js'
import { ref } from 'vue'
import { showErrorMsg } from '@/utils/alterMessage.js'
import { BellFilled, Iphone, OfficeBuilding, User } from '@element-plus/icons-vue'

const aqiFeedbackStore = useAqiFeedbackStore()
const { drawerVisible, currentAqiFeedback } = storeToRefs(aqiFeedbackStore)
const memberStore = useMemberStore()
const { memberList } = storeToRefs(memberStore)
const selected = ref('')
let currentMember = ref('')

const handleChange = () => {
  currentMember.value = memberList.value.find((item) => item.memId === selected.value)
  console.log(currentMember.value)
}

const cancelClick = () => {
  drawerVisible.value = false
}
const confirmClick = () => {
  if (selected.value === null || selected.value === '') {
    showErrorMsg('请选择网格员')
  } else {
    aqiFeedbackStore.assignTask(currentAqiFeedback.value.afId, selected.value)
  }
}

const handleOpen = () => {
  memberStore.getGridList()
}
const handleClose = () => {
  selected.value = ''
  currentMember.value = ''
}
</script>

<style scoped lang="scss">
.drawer-main {
  display: flex;
  justify-content: center;
  .cell-item {
    width: 100px;
  }

  .drawer-default {
    width: 240px;
  }

  .footer-btn {
    display: flex;
    justify-content: space-between;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
  }

  .drawer-title {
    font-size: 16px;
    font-weight: bold;
    color: #444549;
  }
}
</style>
